<template>
    <div class="user-wrap">
        <div class="user-body">
            <a-row :gutter="10">
                <a-col :span="6">

                    <a-menu
                            class="app-card"
                            mode="vertical"
                            theme="light"
                            v-model:selectedKeys="current"
                            @click="menuChange"
                    >
                        <a-menu-item key="/user">
                            <icon-font class="menu-icon" type="icon-user"/>
                            <span>个人中心</span>
                        </a-menu-item>
                        <a-menu-item key="/user/manage-engine">
                            <icon-font class="menu-icon" type="icon-engine"/>
                            <span>引擎管理</span>
                        </a-menu-item>
                        <a-menu-item key="/user/manage-bookmark">
                            <icon-font class="menu-icon" type="icon-bookmark"/>
                            <span>书签管理</span>
                        </a-menu-item>
                        <a-menu-item key="/user/recommend-engine">
                            <icon-font class="menu-icon" type="icon-search"/>
                            <span>引擎推荐</span>
                        </a-menu-item>
                        <a-menu-item key="/user/recommend-website">
                            <icon-font class="menu-icon" type="icon-website"/>
                            <span>网站推荐</span>
                        </a-menu-item>
                        <!--<a-menu-item key="/user/article">
                            <icon-font class="menu-icon" type="icon-article"/>
                            <span>用户文章</span>
                        </a-menu-item>-->
                        <a-menu-item key="/">
                            <icon-font class="menu-icon" type="icon-home"/>
                            <span>返回首页</span>
                        </a-menu-item>
                    </a-menu>

                </a-col>
                <a-col :span="18">
                    <slot></slot>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
    import website from "/src/config/website";
    import {checkToken} from "/src/request/api/user";
    import {goUrl} from "/src/util/index";

    // iconfont
    import {createFromIconfontCN} from '@ant-design/icons-vue';
    const IconFont = createFromIconfontCN({scriptUrl: website.iconfontUrl});


    export default {
        name: "UserLayout",
        // 组件
        components: {
            IconFont,
        },
        // 数据
        data() {
            return {
                current: [],
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 初始化
            init() {
                let that = this;
                that.current = [that.$route.path];
                that.checkToken();
            },
            // 检测TOKEN
            checkToken() {
                let that = this,
                    token = localStorage.getItem(website.token) || '';

                if (token) {
                    checkToken({
                        token: token
                    }).then(res => {
                        that.$store.commit('setToken', token);
                    }).catch(err => {
                        that.$store.commit('setToken', '');
                    })
                }
            },
            // 分类
            menuChange(item) {
                // console.log('menuChange', item);
                goUrl(item.key);
            },
        }
    }
</script>

<style lang="less" scoped>
    .user-wrap {
        background-color: #f1f1f1;
        min-height: 500px;

        .user-body {
            width: 1024px;
            margin: 0 auto;
            padding: 50px 0;

            .menu-icon {
                font-size: 16px;
            }
        }

    }
</style>
